<template>
	<view class="page">
		<view class="video-box" v-if="!wxCheckType">
			<view class="video-title">产品视频</view>
			<view class="video-content">
				<view v-if="!productVideo.video" class="video-init" @tap="addVideo">
					<u-icon name="plus" color="#C9CDD4" size="64rpx"></u-icon>
					<text class="text-lg">点击面板上传视频</text>
					<text>推荐尺寸：686x320</text>
				</view>
				<view v-else class="video-main">
					<video class="video-video" :src="productVideo.video" controls></video>
					<view class="video-btns">
						<view class="video-btn bg-hover" @tap="deleteVideo">
							<u-image width="30rpx" height="30rpx"
								src="https://file.casugn.com/storecompcard/static/img/edit／delete@2x_1681976320248.png"></u-image>
							<text class="video-btn__text">删除</text>
						</view>
						<view class="video-btn bg-hover" @tap="editVideo">
							<u-image width="30rpx" height="30rpx"
								src="https://file.casugn.com/storecompcard/static/img/edit／edit@2x_1681976335066.png"></u-image>
							<text class="video-btn__text">重新上传</text>
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="modules">
			<view class="module" v-for="(item,index) in items" :key="index">
				<view class="module-main bg-hover" @tap="itemToDetail(item)">
					<view class="module-main__title">{{item.category}}</view>
				</view>
				<view class="module-btns">
					<view class="module-btn bg-hover" @tap="deleteHandle(item,index)">
						<u-image width="30rpx" height="30rpx"
							src="https://file.casugn.com/storecompcard/static/img/edit／delete@2x_1681976320248.png"></u-image>
						<text class="module-btn__text">删除</text>
					</view>
					<view class="module-btn bg-hover" @tap="editHandle(item,index)">
						<u-image width="30rpx" height="30rpx"
							src="https://file.casugn.com/storecompcard/static/img/edit／edit@2x_1681976335066.png"></u-image>
						<text class="module-btn__text">编辑</text>
					</view>
				</view>
			</view>
		</view>

		<template v-if="loadMoreStatus!=='loading'&&!items.length">
			<u-empty marginTop="21.7vh" width="240rpx" height="240rpx" text="暂时没有产品" textSize="28rpx" textColor="#86909C"
				icon="https://file.casugn.com/storecompcard/temp/空页面@2x(6)_1681114072965.png"></u-empty>
			<u-button color="#276AEE" throttleTime="500"
				:customStyle="{width:'232rpx', height:'64rpx', marginTop:'16rpx', fontSize:'28rpx'}"
				@click="addHandle">提交产品管理</u-button>
		</template>

		<template v-if="loadMoreStatus==='loading'">
			<u-loadmore height="100" fontSize="28rpx" iconSize="34rpx" :status="loadMoreStatus" @loadmore="scrolltolower" />
		</template>

		<template v-if="items.length">
			<cus-add-btn :safeAreaInsetBottom="true" @click="addHandle"></cus-add-btn>
		</template>

		<product-category-popup ref="ProductCategoryPopup" @refresh="refresherrefresh"></product-category-popup>

		<product-video-popup ref="ProductVideoPopup" @refresh="videorefresh"></product-video-popup>

	</view>
</template>

<script>
	import { mapGetters, mapState } from 'vuex'
	import ProductCategoryPopup from './components/product-category-popup.vue'
	import ProductVideoPopup from './components/product-video-popup.vue'
	import baseConfig from '@/config/baseUrl.js'

	export default {
		components: { ProductCategoryPopup, ProductVideoPopup },
		data() {
			return {
				productVideo: {},
				items: [],
				pageNo: 1,
				pageSize: 10,
				loadMoreStatus: 'nomore', //loading / nomore / loadmore
			}
		},
		computed: {
			...mapGetters(['userInfo']),
			...mapState(['wxCheckType']),
		},
		onLoad() {
			this.loadMoreStatus = 'loading'
			this.getDBData()
			this.getProductDetail()
		},
		onPullDownRefresh() {
			this.refresherrefresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.scrolltolower()
		},
		methods: {
			async getProductDetail() {
				let params = {
					companyId: this.userInfo.companyId || '',
				}
				let res = await this.$api.getProductVideoByCompanyId(params)
				if (res.success) {
					this.productVideo = res.result || {}
				}
			},
			addVideo() {
				this.$refs.ProductVideoPopup.add()
			},
			editVideo() {
				this.$refs.ProductVideoPopup.edit(this.productVideo)
			},
			deleteVideo() {
				const that = this
				uni.showModal({
					title: '警告! ',
					content: `该操作将删除产品视频，且不可逆，是否继续？`,
					success: async (res) => {
						if (res.confirm) {
							let res = await that.$api.deleteProductVideo(that.productVideo.id)
							if (res.success) {
								uni.showToast({ title: '删除成功！', icon: 'none' });
								that.productVideo = {}
							} else {
								uni.showToast({ title: res.message || '删除失败！', icon: 'none' });
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			videorefresh() {
				this.getProductDetail()
			},
			itemToDetail(item) {
				this.$goToPage(`/pagesCard/addProductInfo/addProductInfo?id=${item.id}`)
			},
			addHandle() {
				this.$refs.ProductCategoryPopup.add()
			},
			deleteHandle(item, index) {
				const that = this
				uni.showModal({
					title: '警告! ',
					content: `该操作将删除产品类别 [${item.category}] 及下级产品信息`,
					success: async (res) => {
						if (res.confirm) {
							let res = await that.$api.delProductCategoryById(item.id)
							if (res.success) {
								uni.showToast({ title: '删除成功！', icon: 'none' });
								that.items.splice(index, 1)
							} else {
								uni.showToast({ title: res.message || '删除失败！', icon: 'none' });
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			editHandle(item, index) {
				this.$refs.ProductCategoryPopup.edit(item)
			},
			async getDBData(type = 'refresh') {
				let params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					companyId: this.userInfo.companyId,
					isDel: 0,
					column: 'sort',
					order: 'asc',
				}
				let res = await this.$api.getProductCategoryList(params)
				if (res.success) {
					let tData = res.result.records
					if (type === 'refresh') {
						this.items = tData
					}
					if (type === 'add') {
						this.items.push(...tData)
					}
					console.log('产品类别列表：', this.items);
					this.loadMoreStatus = res.result.pages > res.result.current ? 'loadmore' : 'nomore'
				} else {
					this.loadMoreStatus = 'nomore'
				}
			},
			scrolltolower() {
				if (this.loadMoreStatus === 'nomore') {
					return
				}
				this.loadMoreStatus = 'loading';
				this.pageNo += 1
				this.getDBData('add')
			},
			refresherrefresh() {
				this.loadMoreStatus = 'loading'
				this.items = []
				this.pageNo = 1
				setTimeout(async () => {
					await this.getDBData('refresh')
				}, 500)
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F8FA;
	}

	.page {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.modules {
		padding: 24rpx 32rpx;

		.module {
			background-color: #fff;
			border-radius: 16rpx;

			&:nth-child(n+2) {
				margin-top: 24rpx;
			}

			.module-main {
				position: relative;
				padding: 32rpx 24rpx 16rpx;

				&::before {
					content: "";
					position: absolute;
					bottom: 0;
					left: 24rpx;
					right: 24rpx;
					border-bottom: 1rpx dashed #E5E6EB;
				}

				.module-main__title {
					font-size: 28rpx;
					font-weight: 600;
					//color: #1D2129;
					color: #276AEE;
					line-height: 40rpx;
				}
			}

			.module-btns {
				padding: 8rpx 24rpx;

				display: flex;
				align-items: center;

				.module-btn {
					width: 100%;
					height: 56rpx;
					border-radius: 4rpx;

					display: flex;
					justify-content: center;
					align-items: center;

					.module-btn__text {
						margin-left: 8rpx;
						font-size: 28rpx;
						color: #4E5969;
						line-height: 40rpx;
					}
				}
			}
		}
	}

	.video-box {
		padding: 32rpx;
		background-color: #fff;

		.video-title {
			font-size: 26rpx;
			color: #1D2129;
			line-height: 36rpx;
		}

		.video-content {
			margin-top: 16rpx;

			.video-init {
				width: 686rpx;
				height: 320rpx;
				font-size: 24rpx;
				color: #86909C;
				line-height: 34rpx;
				background-color: #F7F8FA;
				border-radius: 8rpx;

				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.text-lg {
					margin: 16rpx 0;
					font-size: 32rpx;
					line-height: 44rpx;
				}
			}

			.video-main {
				.video-video {
					width: 686rpx;
					height: 320rpx;
				}

				.video-btns {
					padding: 8rpx 24rpx;

					display: flex;
					align-items: center;

					.video-btn {
						width: 100%;
						height: 56rpx;
						border-radius: 4rpx;

						display: flex;
						justify-content: center;
						align-items: center;

						.video-btn__text {
							margin-left: 8rpx;
							font-size: 28rpx;
							color: #4E5969;
							line-height: 40rpx;
						}
					}
				}
			}
		}

		::v-deep .editor-container {
			.fixed-top {
				display: none !important;
			}

			scroll-view {
				height: unset !important;
			}
		}
	}
</style>
